<template>
    <div class="upload-co">
      <el-upload
        ref="upload"
        :action="`/api/blade-resource/oss/endpoint/put-file?code=minio`"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :before-upload="onBeforeUpload"
        :multiple="limit!==1"
        :file-list="fileList"
        :disabled="disabled"
        :class="{'limited':limit === fileList.length}"
        :headers="uploadHeaders"
        :limit="limit"
        accept="image/*"
        :on-progress="onProgress"
        :on-success="onSuccess"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </template>
  <script>
    import {baseUrl} from "../../config/env";
    import {getToken} from "../../util/auth";
  
    export default {
      name:'upload',
      props:{
        limit:{
          type:Number,
          default:1
        },
        disabled:{
          type:Boolean,
          default:false
        }
      },
      computed:{
        uploadHeaders(){
          let obj = {}
          obj['Blade-Auth'] = "Bearer " + getToken()
          return obj
        }
      },
      data(){
        return{
          baseUrl,
          fileList:[],
          uploading:false,
          dialogImageUrl: '',
          dialogVisible: false,
          timer:null
        }
      },
      methods:{
        onProgress(file) {
          this.percentage = Math.floor(file.percent)
        },
        onSuccess(res, file,el) {
  
          if(file.response.code !== 200){
            this.$message.error(file.response.msg)
            return false
          }
          clearTimeout(this.timer)
          this.timer = setTimeout(()=>{
            this.$message.success('上传成功')
          },200)
          file.url = file.response.data.link
          console.log(file);
          console.log(el);
          this.fileList = el
          console.log(this.fileList);
          this.update()
  
        },
        update(){
          const imgList = this.fileList.map(o=>{
            return o.url
          })
          this.$emit('update',imgList)
        },
        onBeforeUpload(file) {
          const fileName = file.name;   //取文件名字
          const fileType = fileName.substring(fileName.lastIndexOf("."));//去文件后缀
          // jpeg,.png,.jpg,
          if (fileType === ".jpg" || fileType === ".png" || fileType === ".jpeg") {
            // 不处理
          } else {
            this.$message.warning('只支持上传png,jpeg,jpg格式的图片')
            return false;
          }
          this.uploading = true
        },
        handleRemove(file, fileList) {
          const index = this.fileList.findIndex(o=>{
            return o.uid === file.uid
          })
          this.fileList.splice(index,1)
          console.log(this.fileList);
          this.update()
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }
      }
    }
  </script>
  <style scoped lang="scss">
  .upload-co{
    /deep/.el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
    }
    /deep/.el-upload--picture-card{
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
    /deep/.el-form-item--small.el-form-item{
      margin-bottom: 0;
    }
    .limited{
      /deep/ .el-upload{
        display: none;
      }
    }
  }
  </style>
  